<template>
  <div class="project-application-add-container" v-loading="loading">
    <BreadCrumbRow/>
    <div class="project-application-add-main">
      <template v-if="ProjectFormType.REVIEW === this.pageType">
        <div class="title">审核历史</div>
        <HistoryApproveFlowAxis :flow-list="form.timeInfos || []"/>
      </template>

      <div class="title">基本信息</div>
      <el-form class="form-body" ref="formRef" :model="form" :rules="rules" label-width="130">
        <el-form-item label="项目类型" prop="projectType" class="third_row">
          <el-select v-if="editable" v-model="form.projectType" placeholder="请选择">
            <el-option v-for="item in options.projectTypeEnum" :label="item.label" :value="item.value"/>
          </el-select>
          <span v-else>{{ dicFormatter(options.projectTypeEnum, form.projectType) }}</span>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName" class="third_row">
          <el-input v-if="editable" v-model="form.projectName	" placeholder="请输入" :maxlength="50"/>
          <span v-else>{{ form.projectName }}</span>
        </el-form-item>
        <el-form-item label="建设规模" prop="projectScale" class="third_row">
          <el-select v-if="editable" v-model="form.projectScale" placeholder="请选择">
            <el-option v-for="item in options.projectScaleEnum" :label="item.label" :value="item.value"/>
          </el-select>
          <span v-else>{{ dicFormatter(options.projectScaleEnum, form.projectScale) }}</span>
        </el-form-item>

        <el-form-item label="项目单位" prop="projectUnit" class="third_row">
          <el-tree-select ref="projectUnitRef" v-if="editable" v-model="form.projectUnit" :data="options.companyUnitTreeData" node-key="organizationId"
                          placeholder="请选择" show-checkbox check-strictly :props="options.companyUnitTreeProps" default-expand-all
                          @change="companyUnitChange('projectUnitRef', 'projectUnitName', 'projectChargePersonListData')"/>
          <span v-else>{{ form.projectUnitName }}</span>
        </el-form-item>
        <el-form-item label="项目负责人" prop="projectChargePerson" class="third_row">
          <!--          <el-input v-if="editable" v-model="form.projectChargePerson" placeholder="请输入"/>-->
          <el-tree-select ref="projectChargePersonRef" v-if="editable" v-model="form.projectChargePerson" :data="projectChargePersonListData" default-expand-all
                          node-key="userId" placeholder="请选择" show-checkbox check-strictly multiple collapse-tags :props="options.personTreeProps"
                          @change="personChange('projectChargePersonRef', 'projectChargePersonName')"/>
          <span v-else>{{ form.projectChargePersonName }}</span>
        </el-form-item>
        <el-form-item label="联系电话" prop="projectTelephone" class="third_row">
          <el-input v-if="editable" v-model="form.projectTelephone" placeholder="请输入" :maxlength="11"/>
          <span v-else>{{ form.projectTelephone }}</span>
        </el-form-item>

        <el-form-item label="施工单位" prop="constructionUnit" class="third_row">
          <el-tree-select ref="constructionUnitRef" v-if="editable" v-model="form.constructionUnit" :data="options.companyUnitTreeData"
                          node-key="organizationId" placeholder="请选择" default-expand-all
                          show-checkbox check-strictly :props="options.companyUnitTreeProps"
                          @change="companyUnitChange('constructionUnitRef', 'constructionUnitName', 'constructionChargePersonListData')"/>
          <span v-else>{{ form.constructionUnitName }}</span>
        </el-form-item>
        <el-form-item label="施工单位负责人" prop="constructionChargePerson" class="third_row">
          <!--          <el-input v-if="editable" v-model="form.constructionChargePerson" placeholder="请输入"/>-->
          <el-tree-select ref="constructionChargePersonRef" v-if="editable" v-model="form.constructionChargePerson" :data="constructionChargePersonListData"
                          node-key="userId" placeholder="请选择" show-checkbox check-strictly multiple collapse-tags :props="options.personTreeProps"
                          @change="personChange('constructionChargePersonRef', 'constructionChargePersonName')"/>
          <span v-else>{{ form.constructionChargePersonName }}</span>
        </el-form-item>
        <el-form-item label="联系电话" prop="constructionTelephone" class="third_row">
          <el-input v-if="editable" v-model="form.constructionTelephone" placeholder="请输入" :maxlength="11"/>
          <span v-else>{{ form.constructionTelephone }}</span>
        </el-form-item>

        <el-form-item label="建设单位" prop="supervisionUnit" class="third_row">
          <el-tree-select ref="supervisionUnitRef" v-if="editable" v-model="form.supervisionUnit" :data="options.companyUnitTreeData" node-key="organizationId"
                          placeholder="请选择" show-checkbox check-strictly :props="options.companyUnitTreeProps" default-expand-all
                          @change="companyUnitChange('supervisionUnitRef', 'supervisionUnitName', 'supervisionChargePersonListData')"/>
          <span v-else>{{ form.supervisionUnitName }}</span>
        </el-form-item>
        <el-form-item label="建设单位负责人" prop="supervisionChargePerson" class="third_row">
          <!--          <el-input v-if="editable" v-model="form.supervisionChargePerson" placeholder="请输入"/>-->
          <el-tree-select ref="supervisionChargePersonRef" v-if="editable" v-model="form.supervisionChargePerson" :data="supervisionChargePersonListData"
                          node-key="userId" placeholder="请选择" show-checkbox check-strictly multiple collapse-tags :props="options.personTreeProps"
                          @change="personChange('supervisionChargePersonRef', 'supervisionChargePersonName')"/>
          <span v-else>{{ form.supervisionChargePersonName }}</span>
        </el-form-item>
        <el-form-item label="联系电话" prop="supervisionTelephone" class="third_row">
          <el-input v-if="editable" v-model="form.supervisionTelephone" placeholder="请输入" :maxlength="11"/>
          <span v-else>{{ form.supervisionTelephone }}</span>
        </el-form-item>

        <el-form-item label="开工日期" prop="planStartTime" class="third_row">
          <el-date-picker v-if="editable" v-model="form.planStartTime" placeholder="请选择" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                          format="YYYY-MM-DD HH:mm:ss" @change="startDateChange"/>
          <span v-else>{{ form.actualStartTime || form.planStartTime }}</span>
        </el-form-item>
        <el-form-item label="竣工日期" prop="planEndTime" class="third_row">
          <el-date-picker v-if="editable" v-model="form.planEndTime" placeholder="请选择" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                          format="YYYY-MM-DD HH:mm:ss" @change="endDateChange" :default-value="defaultPlanEndTime"/>
          <span v-else>{{ form.actualEndTime || form.planEndTime }}</span>
        </el-form-item>
        <el-form-item label="施工航站楼" prop="location" class="all_row" style="vertical-align: top;">
          <el-radio-group v-if="editable" v-model="form.location">
            <el-radio v-for="item in options.locationEnum" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
          <span v-else>{{ dicFormatter(options.locationEnum, form.location) }}</span>
        </el-form-item>
        <el-form-item label="备注" prop="remark" class="all_row">
          <el-input v-if="editable" v-model="form.remark" type="textarea" rows="5" show-word-limit maxlength="500" placeholder="请输入"/>
          <span v-else>{{ form.remark }}</span>
        </el-form-item>
        <el-form-item label="附件" prop="files" class="all_row">
          <HyUpload :file-list.sync="form.files" :disabled="!editable"/>
        </el-form-item>
      </el-form>

      <div class="title">施工区域</div>
      <AreaTable title="施工区域列表" :tableData="form.areas" :options="options" :disabled="!editable" :location="form.location"/>

      <div class="title">特种作业人员</div>
      <UserTable v-for="(value, key) in specialList" :title="replaceStr(dicFormatter(options.specialOperationEnum, key))" :tableData="value"
                 :personType="options.personTypeEnum[0].value" @onsubmit="addUserSubmit"
                 @ondelete="deleteUser" :options="options" :disabled="!editable" :operators="form.operators"/>

      <div class="title">其它施工人员</div>
      <UserTable title="施工人员列表" :tableData="otherConstructionUsers" :personType="options.personTypeEnum[1].value" @onsubmit="addUserSubmit"
                 @ondelete="deleteUser" :options="options" :disabled="!editable" notRequireFile/>

      <template v-if="pageType !== ProjectFormType.ADD">
        <div class="title">审批记录</div>
        <ApproveRecord title="操作记录" :tableData="form.timeInfos || []" :options="options"/>
      </template>

      <template v-if="pageType === ProjectFormType.REVIEW">
        <div class="title">延期记录</div>
        <DelayRecord title="延期记录" :tableData="form.schedules || []" :options="options"/>
      </template>

      <div class="operate-fixed">
        <el-button size="large" @click="handleCancel">取消</el-button>
        <template v-if="ProjectFormType.ADD === this.pageType">
          <el-button type="primary" size="large" @click="handleTemplate">暂存</el-button>
          <el-button type="primary" size="large" @click="handleCreate" :loading="loading" :disabled="loading">提交</el-button>
        </template>
        <template v-if="ProjectFormType.DETAIL === this.pageType">
          <el-button type="primary" size="large" @click="handleEdit" v-if="form.state === options.stateEnum.REJECT">编辑</el-button>
        </template>
        <template v-if="ProjectFormType.REVIEW === this.pageType">
          <template v-if="form.state === options.stateEnum.PENDING">
            <el-button type="danger" size="large" @click="openApproveProject" :loading="loading">驳回</el-button>
            <el-button type="primary" size="large" @click="handlePass" :loading="loading">通过</el-button>
          </template>
        </template>
      </div>
    </div>
    <AddApproveFlow ref="addApproveFlowRef"/>
    <ReviewProject ref="reviewProjectRef"/>
  </div>
</template>

<script>
import BreadCrumbRow from "@/components/BreadCrumbRow";
import UserTable from "@/views/construction/project-application/componens/UserTable";
import AreaTable from "@/views/construction/project-application/componens/AreaTable";
import HyUpload from "./HyUpload";
import AddApproveFlow from "@/views/construction/project-application/componens/AddApproveFlow";
import store from "@/store";
import {getResource} from "@/api/resource";
import {approveProject, createProject, getCommonProcessNodes, getProjectDetail, updateProject} from "@/api/construction-project/projectManage";
import {
  approvalTypeTree,
  approveNodeTypeEnum,
  dicFormatter,
  matchProjectState, nodeTypeEnum,
  personSourceEnum,
  personTypeEnum,
  ProjectFormType,
  stateEnum
} from "@/views/construction/project-application/projectUtil";
import ReviewProject from "@/views/construction/project-application/componens/ReviewProject";
import ApproveRecord from "@/views/construction/project-application/componens/ApproveRecord";
import DelayRecord from "@/views/construction/project-application/componens/DelayRecord";
import HistoryApproveFlowAxis from "@/views/construction/project-application/componens/HistoryApproveFlowAxis";
import {getUserInfo} from "@/api/eqpt/houseManger";
import router from "@/router";
import moment from 'moment'

export default {
  name: "ProjectForm",
  components: {HistoryApproveFlowAxis, DelayRecord, ApproveRecord, ReviewProject, AddApproveFlow, HyUpload, AreaTable, UserTable, BreadCrumbRow},
  props: {
    pageType: {
      type: String,
      default: ProjectFormType.ADD
    }
  },
  provide() {
    return {
      options: this.options,
      pageType: this.pageType
    }
  },
  data() {
    return {
      loading: false,
      form: {
        projectType: undefined,
        projectName: undefined,
        projectUnit: undefined, // 项目单位
        projectChargePerson: undefined, // 项目负责人
        projectTelephone: undefined, // 项目负责人联系电话
        constructionUnit: undefined, // 施工单位
        constructionChargePerson: undefined, // 施工单位负责人
        constructionTelephone: undefined, // 施工单位联系电话
        supervisionUnit: undefined, // 建设单位
        supervisionChargePerson: undefined, // 建设单位负责人
        supervisionTelephone: undefined, // 建设单位联系电话
        projectScale: undefined, // 建设规模
        planStartTime: undefined, // 开工日期
        planEndTime: undefined,// 竣工日期
        location: undefined, // 施工航站楼
        remark: undefined,
        areas: [],
        operators: [],
        files: []
      },
      projectChargePersonListData: [],
      constructionChargePersonListData: [],
      supervisionChargePersonListData: [],
      options: {
        projectTypeEnum: [],
        locationEnum: [],
        specialOperationEnum: [],
        projectScaleEnum: [],
        personTypeEnum: personTypeEnum,
        personSourceEnum: personSourceEnum,
        companyUnitTreeData: [],
        nodeTypeEnum: nodeTypeEnum,
        approveNodeTypeEnum: approveNodeTypeEnum,
        projectWorkTypeOptions: [], // 特种作业工作类型
        // 固定状态列表
        stateEnum: stateEnum,
        approvalTypeTree: approvalTypeTree,
        companyUnitTreeProps: {
          label: 'organizationName',
          disabled: (data, node) => {
            return data.disabled
          }
        },
        personTreeProps: {
          label: 'name',
          disabled: (data, node) => {
            return false
          }
        },
      },
      rules: {
        projectType: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        projectName: [
          {required: true, message: '请输入', trigger: ['change']},
        ],
        projectUnit: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        projectChargePerson: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        projectTelephone: [
          {required: true, message: '请输入', trigger: ['change']},
          {pattern: /^1[34578]\d{9}$/, message: "请输入合法手机号", trigger: ['change']}
        ],
        constructionUnit: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        constructionTelephone: [
          {required: true, message: '请输入', trigger: ['change']},
          {pattern: /^1[34578]\d{9}$/, message: "请输入合法手机号", trigger: ['change']}
        ],
        constructionChargePerson: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        supervisionUnit: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        supervisionTelephone: [
          {required: true, message: '请输入', trigger: ['change']},
          {pattern: /^1[34578]\d{9}$/, message: "请输入合法手机号", trigger: ['change']}
        ],
        planStartTime: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        planEndTime: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
        location: [
          {required: true, message: '请选择', trigger: ['change']},
        ],
      },
      dicFormatter,
      matchProjectState,
      ProjectFormType,
    }
  },
  computed: {
    editable() {
      return [ProjectFormType.ADD].includes(this.pageType)
    },
    userInfo() {
      return store.state.user.userInfo
    },
    // 施工人员
    otherConstructionUsers() {
      let users = this.form.operators.filter(item => item.personType === this.options.personTypeEnum[1].value)
      return users
    },
    defaultPlanEndTime() {
      return moment().format('yyyy-MM-DD 23:59:59')
    },
    // 特殊作业人员
    specialList() {
      let users = this.form.operators.filter(item => item.personType === this.options.personTypeEnum[0].value)
      let res = users.reduce((obj, item) => {
        let arr = obj[item.specialJobType]
        if (arr) {
          arr.push(item)
        } else {
          obj[item.specialJobType] = [item]
        }
        return obj
      }, {})
      if (!Object.keys(res).length) {
        return {
          UseFire: [],
        }
      } else {
        return res
      }
    },
  },
  mounted() {
    this.initQuery()
    this.initOptions()
    setTimeout(() => {
      this.$refs.formRef.clearValidate()
    }, 100)
  },
  methods: {
    initQuery() {
      if (this.$route.query.id) {
        this.loading = true
        getProjectDetail(this.$route.query.id).then(res => {
          let temp = localStorage.getItem('project_temporary_' + this.$route.query.id)
          // 拒绝后在编辑也可能有暂存数据，在ADD页面包含添加合驳回后编辑
          if (res.data.project?.state === this.options.stateEnum.REJECT && temp && ProjectFormType.ADD === this.pageType) {
            this.form = JSON.parse(temp)
          } else {
            let {project, projectChargePerson, constructionChargePerson, supervisionChargePerson, ...more} = res.data
            let arr1 = project.projectChargePerson ? project.projectChargePerson.split(',') : undefined
            let arr2 = project.constructionChargePerson ? project.constructionChargePerson.split(',') : undefined
            let arr3 = project.supervisionChargePerson ? project.supervisionChargePerson.split(',') : undefined

            if (project.projectUnit) {
              this.companyUnitChange('projectUnitRef', 'projectUnitName', 'projectChargePersonListData', project.projectUnit)
            }
            if (project.constructionUnit) {
              this.companyUnitChange('constructionUnitRef', 'constructionUnitName', 'constructionChargePersonListData', project.constructionUnit)
            }
            if (project.supervisionUnit) {
              this.companyUnitChange('supervisionUnitRef', 'supervisionUnitName', 'supervisionChargePersonListData', project.supervisionUnit)
            }

            this.form = {
              ...project,
              projectChargePerson: arr1,
              constructionChargePerson: arr2,
              supervisionChargePerson: arr3,
              files: project.files ? project.files : [],
              ...more
            }
          }
        }).catch(e => {
          this.$message.error(e)
        }).finally(() => {
          this.loading = false
        })
      } else {
        let temp = localStorage.getItem('project_temporary')
        if (temp) {
          this.form = JSON.parse(temp)
        }
        this.form.projectType = this.$route.query.projectType
      }
    },
    initOptions() {
      const tree = store.getters['user/getOrganTree']
      this.options.companyUnitTreeData = tree

      Promise.all([
        getResource('CM_PROJECT_TYPE'),
        getResource('terminals'),
        getResource('SPECIAL_OPERATION'),
        getResource('PROJECT_SCALE'),
        getResource('CM_PROJECT_PROCESS_UPLOAD'),
        getResource('CM_PROJECT_WORK_TYPE'),
        getCommonProcessNodes(),
      ]).then((
        [
          CM_PROJECT_TYPE,
          terminals,
          SPECIAL_OPERATION,
          PROJECT_SCALE,
          CM_PROJECT_PROCESS_UPLOAD,
          CM_PROJECT_WORK_TYPE,
          commonProcessNodes
        ]) => {
        this.options.projectTypeEnum = CM_PROJECT_TYPE.data.properties.meta
        this.options.locationEnum = terminals.data.properties.meta
        this.options.specialOperationEnum = SPECIAL_OPERATION.data.properties.meta
        this.options.projectScaleEnum = PROJECT_SCALE.data.properties.meta
        this.options.approveNodeTypeEnum = CM_PROJECT_PROCESS_UPLOAD.data.properties.meta
        this.options.projectWorkTypeOptions = CM_PROJECT_WORK_TYPE.data.properties.meta
        this.options.commonProcessNodes = commonProcessNodes.data
      })
    },
    startDateChange(val) {
      if (!this.form.planEndTime) return
      const startDate = new Date(val)
      const endDate = new Date(this.form.planEndTime)
      if (startDate.getTime() > endDate.getTime()) {
        this.form.planEndTime = undefined
      }
    },
    endDateChange(val) {
      if (!this.form.planStartTime) return
      const startDate = new Date(this.form.planStartTime)
      const endDate = new Date(val)
      if (startDate.getTime() > endDate.getTime()) {
        this.form.planStartTime = undefined
      }
    },
    handleCreate() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
        this.$refs.formRef.validate(async valid => {
          if (valid) {
            this.validData()
            let {files, projectChargePerson, constructionChargePerson, supervisionChargePerson, ...more} = this.form
            let newForm = {
              creator: {
                id: this.userInfo.userId,
                name: this.userInfo.name,
                organId: this.userInfo.organId,
                organName: this.userInfo.organName,
              },
              projectChargePerson: projectChargePerson ? projectChargePerson.join(',') : undefined,
              constructionChargePerson: constructionChargePerson ? constructionChargePerson.join(',') : undefined,
              supervisionChargePerson: supervisionChargePerson ? supervisionChargePerson.join(',') : undefined,
              ...more,
              files: files && files.length ? files : undefined
            }
            if (this.form.id) {
              newForm.lastMender = {
                id: this.userInfo.userId,
                name: this.userInfo.name,
                organId: this.userInfo.organId,
                organName: this.userInfo.organName,
              }
              await updateProject(newForm)
            } else {
              await createProject(newForm)
            }
            localStorage.removeItem('project_temporary')
            this.$message.success('提交成功')
            this.$router.back()
          }
        })
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 2000)
      }
    },
    validData() {
      let {planStartTime, planEndTime,} = this.form
      let startDate = new Date(planStartTime)
      let endDate = new Date(planEndTime)
      if (startDate.getTime() > endDate.getTime()) {
        this.$message.error('开工时间不能大于竣工时间')
        throw new Error('开工时间不能大于竣工时间')
      }
    },
    handleEdit() {
      router.push({
        path: '/construction/add',
        query: {id: this.form.id}
      })
    },
    handleTemplate() {
      let key = 'project_temporary'
      if (this.$route.query.id) {
        key += '_' + this.$route.query.id
      }
      localStorage.setItem(key, JSON.stringify(this.form))
      this.$message.success('保存成功')
    },
    handleCancel() {
      this.$router.back()
    },
    openApproveProject() {
      this.$refs.reviewProjectRef.open(this.form, '驳回')
    },
    handlePass() {
      if (this.form.change) {
        // 变更的审核
        this.$refs.reviewProjectRef.open(this.form, '通过')
      } else {
        this.$refs.addApproveFlowRef.open({
          projectInfo: this.form,
          resolve: (approveInfo) => {
            let newForm = {
              approver: {
                id: this.userInfo.userId,
                name: this.userInfo.name,
                organId: this.userInfo.organId,
                organName: this.userInfo.organName,
              },
              processInfoAppendScheme: approveInfo,
              projectId: this.form.id,
              status: 1,
              change: this.form.change,
              examineOpinion: undefined,
            }
            approveProject(newForm).then(res => {
              this.$message.success('操作成功')
              this.$router.back()
            })
          }
        })
      }
    },
    addUserSubmit(obj) {
      if (Array.isArray(obj)) {
        this.form.operators.push(...obj)
      } else {
        this.form.operators.push(obj)
      }
    },
    deleteUser(row) {
      let index = this.form.operators.findIndex(item => item === row)
      this.form.operators.splice(index, 1)
    },
    companyUnitChange(refName, setFieldName, personListFieldName, defaultSelected) {
      // 人员选择项字段清空
      this.form[personListFieldName.replace('ListData', '')] = []

      let ref = this.$refs[refName]
      let checkedNodes = []
      if (defaultSelected) {
        checkedNodes = [{organizationId: defaultSelected}]
      } else {
        checkedNodes = ref.getCheckedNodes()
        if (checkedNodes.length) {
          this.form[setFieldName] = checkedNodes[0].organizationName
        }
      }
      if (checkedNodes.length) {
        getUserInfo({groupIds: checkedNodes.map(item => item.organizationId)}).then(res => {
          this[personListFieldName] = res.data
        })
      }
    },
    personChange(refName, setFieldName) {
      let ref = this.$refs[refName]
      let checkedNodes = ref.getCheckedNodes()
      if (checkedNodes.length) {
        this.form[setFieldName] = checkedNodes.map(item => item.name).join(',')
      }
    },
    replaceStr (str) {
      return str ? (str.replace('证', '') + '作业') : str
    }
  }
}
</script>

<style lang="less" scoped>
.project-application-add-container {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255, 205, 205, 0.49);

  .project-application-add-main {
    flex: 1;
    overflow: auto;
    padding: 20px 30px 90px 20px;
    background: white;
    margin-top: 20px;
    box-sizing: border-box;
    border-radius: 5px;

    .title {
      position: relative;
      margin-bottom: 20px;
      padding-left: 13px;
      font-size: 18px;
      font-weight: 500;

      &:before {
        position: absolute;
        content: '';
        left: 0;
        top: 1px;
        height: 23px;
        border-radius: 2px;
        width: 6px;
        background: #2F7DF1;
      }
    }

    .form-body {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .third_row {
        width: 31%;
        min-width: 300px;

        ::v-deep .el-form-item__content > * {
          width: 100% !important;
        }
      }

      .all_row {
        width: 93%;

        ::v-deep .el-form-item__content > * {
          width: 100% !important;
        }
      }
    }
  }

  .operate-fixed {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 35%;
    z-index: 10;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    height: 80px;
    background: white;
    border-top: 1px solid #d7d7d7;
  }

}
</style>
